<template>
    <div class="app-container oneSearchNoFooter">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker :clearable="false" v-model="pickerDate" value-format="yyyy-MM-dd" type="daterange"
                        align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;">
                            该日的追帐金额为该日的所有追帐记录金额之和。
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
                <el-form-item class="pull-right">
                    <el-button type="primary" @click="addEditDialog=true">新增追账记录</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row :data="list" border size="mini">
                <el-table-column align="center" prop="backtime" label="追账日期"></el-table-column>
                <el-table-column align="center" prop="create_time" label="上报时间"></el-table-column>
                <el-table-column align="center" prop="cashier_name" label="追账店员"> </el-table-column>
                <el-table-column align="center" label="追账类型">
                    <template slot-scope="scope">
                        {{scope.row.type==0 ?'日报遗漏':scope.row.type==1 ?'其他':'-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="money" label="追账金额"></el-table-column>
                <el-table-column align="center" prop="remark" label="备注"></el-table-column>
                <el-table-column align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button :disabled="!scope.row.is_today" @click="delClick(scope.row.id,scope.$index)" type="danger"
                            icon="el-icon-delete" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 新增编辑弹框 -->
            <el-dialog style="margin-top:-5vh" :close-on-click-modal="false" width="390px" title="新增追账记录" :visible.sync="addEditDialog"
                append-to-body @close="callOf('saveForm')">
                <el-form :model="saveForm" :rules="rules" ref="saveForm" class="demo-form-inline">
                    <el-form-item label="追账门店" prop="store_id">
                        <el-select style="width:100%" filterable placeholder="选择门店" v-model="saveForm.store_id" @change="storeChange">
                            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="追账区域" prop="area_id">
                        <el-select style="width:100%" filterable placeholder="选择门店" v-model="saveForm.area_id">
                            <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="追账日期" prop="datetime">
                        <el-date-picker style="width:100%" :editable="false" :clearable="false" v-model="saveForm.datetime"
                            value-format="yyyy-MM-dd" type="date" placeholder="选择日期" :picker-options="pickerOptions2"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="追账类型" prop="type">
                        <el-select style="width:100%" filterable placeholder="选择追账类型" v-model="saveForm.type">
                            <el-option key="0" label="日报遗漏" value="0"></el-option>
                            <el-option key="1" label="其他" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="追账金额" prop="money">
                        <el-input :maxlength="10" placeholder="请输入最多保留两位的金额" v-model="saveForm.money"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input :maxlength="50" type="textarea" placeholder="选填备注50字内" v-model="saveForm.remark"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveClick('saveForm')" size="small">确认</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getStoreList,
        getAreaList,
        del,
        save,
    } from "@/api/finance/dun";
    import { money } from '@/utils/validate'
    import { pickerOptionsF, pickerDateF, optionMaxTime, isToday } from '@/utils'
    export default {
        data() {
            const validateVal = (rule, value, callback) => {
                if (!money(value)) {
                    callback(new Error('请输入最多保留两位的金额'))
                } else {
                    callback()
                }
            }
            return {
                list: null,
                listLoading: false,
                addEditDialog: false,
                storeList: [],
                areaList: [],
                formInline: {
                    store_id: '',
                    begin_time: '',
                    end_time: ''
                },
                saveForm: {
                    store_id: '',
                    type: '',
                    money: '',
                    datetime: '',
                    remark: '',
                    area_id: ''
                },
                rules: {
                    store_id: [
                        { required: true, message: '请选择门店', trigger: 'change' },
                    ],
                    area_id: [
                        { required: true, message: '请选择区域', trigger: 'change' },
                    ],
                    type: [
                        { required: true, message: '请选择追账类型', trigger: 'change' },
                    ],
                    money: [
                        { required: true, validator: validateVal, trigger: 'blur' }
                    ],
                    datetime: [
                        { required: true, message: '请选择日期', trigger: 'change' }
                    ],

                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF(),
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
            }
        },
        created() {
            this.getStore();
        },
        methods: {
            saveClick(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = JSON.parse(JSON.stringify(this.saveForm));
                        save(data).then(response => {
                            this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                            this.fetchData();
                            this.addEditDialog = false;
                        });
                    }
                });
            },
            delClick(id, index) {
                this.$confirm('此操作删除, 是否继续?', '提示', { type: 'warning' }).then(() => {
                    del({ id: id }).then(response => {
                        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                        }
                    });
                })
            },
            // 获取门店
            getStore() {
                getStoreList({ category_id: 323 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.getArea();
                });
            },
            storeChange() {
                this.getArea();
            },
            getArea() {
                this.saveForm.area_id = '';
                getAreaList({ sid: this.saveForm.store_id, category_id: 323 }).then(response => {
                    this.areaList = response
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    response.forEach(val => {
                        val.is_today = isToday(val.create_time) ? true : false;
                    });
                    this.list = response
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },

            callOf(formName) {
                this.saveForm.remark = '';
                this.addEditDialog = false;
                this.$refs[formName].resetFields();
            },
        }
    }
</script>